<template>
  <header-com></header-com>
  <div id="map"></div>
  <router-view></router-view>
  <footer-com></footer-com>
  <el-button type="primary" plain class="navigationBtn" @click="showNavigation"
    >导航</el-button
  >
</template>

<script setup>
import HeaderCom from '@/components/HeaderCom.vue'
import FooterCom from '@/components/FooterCom.vue'
import { Map } from 'mapbox-gl'
import { onMounted, provide, ref } from 'vue'
import { Scene } from '@antv/l7'
import { Mapbox } from '@antv/l7-maps'
import useControl from './hooks/useControl'
import MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions'
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css'

//定义地图实例为响应式
let map = ref(null)
let scene = ref(null)
let isShow = ref(false)

onMounted(() => {
  //创建地图实例
  map.value = new Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v11',
    center: [116.404, 39.915],
    projection: 'globe',
    zoom: 1,
    attributionControl: false, //不显示地图版权信息
  })

  //地图加载完毕后设置大气效果
  map.value.on('load', () => {
    map.value.setFog({
      // color: '#eee', //设置大气层颜色
      'high-color': '#eee', //设置高海拔颜色
      'horizon-blend': 0.1, //设置地平线混合值
      'star-intensity': 0.8, //设置星星强度
    })
  })

  //创建L7场景实例
  scene.value = new Scene({
    id: 'map',
    map: new Mapbox({
      mapInstance: map.value, //指定地图实例
    }),
    //隐藏logo
    logoVisible: false,
  })

  //等待场景加载完毕
  //调用useControl往场景中添加控件
  scene.value.on('loaded', () => {
    useControl(scene.value, map.value)
  })
  // 暴露地图实例给其他组件使用
  provide('mapscene', {
    map: map.value,
    scene: scene.value,
  })
})
//创建导航插件(不需要放在controls中)
const directions = new MapboxDirections({
  accessToken: mapboxgl.accessToken,
})
//点击按钮显示导航插件
const showNavigation = () => {
  isShow.value = !isShow.value
  if (isShow.value) {
    map.value.addControl(directions, 'top-left')
  } else {
    map.value.removeControl(directions)
  }
}
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#map {
  height: 100vh;
  width: 100vw;
}
.navigationBtn {
  position: absolute;
  width: 100px;
  height: 40px;
  top: 110px;
  left: 10px;
}
.mapboxgl-ctrl-top-left {
  margin-top: 150px;
}
</style>
